import React, { Component } from "react";

export default class Count extends Component {
  componentDidMount() {
    
  }

  add = () => {
    const { value } = this.selectedNum;
    this.props.add(value);
  };
  reduce = () => {
    const { value } = this.selectedNum;
    this.props.reduce(value);
  };

  asyncAdd = () => {
    const { value } = this.selectedNum;
    this.props.asyncAdd(value);
  };
  asyncReduce = () => {
    const { value } = this.selectedNum;
    this.props.asyncReduce(value);
  };

  render() {
    // console.log("countui组件的props = ",this.props);
    return (
      <div>
        <h2>this is CountUI </h2>
        <h3>sum = {this.props.count}</h3>
        <select ref={(c) => (this.selectedNum = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.add}>+</button> &nbsp;
        <button onClick={this.reduce}>-</button>&nbsp;
        <button onClick={this.asyncAdd}>异步+</button>&nbsp;
        <button onClick={this.asyncReduce}>异步-</button>
        <br></br>
        <h3>countUI 获取 Person 组件数据</h3>
        <ul>
          {this.props.person.map((item) => {
            return (
              <li key={item.id}>
                name:{item.name} --- age:{item.age}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
